<template>
  <view class="card-item" @click="handleClick">
    <!-- 左侧图片：占 50% -->
    <view class="card-image-wrapper">
      <!-- @error="handleImageError" -->
      <uv-image
        width="100%"
        height="100%"
        :src="imageSrc"
        mode="aspectFill"
        radius="12"
        @error="handleImageError"
      />
    </view>

    <!-- 右侧文字内容 -->
    <view class="card-content">
      <view class="card-title">{{ data.role_name }}</view>
      <view class="card-author">作者：{{ data.author || "匿名" }}</view>
      <view class="card-desc">{{ data.desc }}</view>
      <template v-if="props.type == 'look'">
        <view class="card-tags">
          <uv-tags
            v-for="tag in data.tag_list"
            :key="tag"
            :text="tag"
            size="mini"
            borderColor="var(--border-color-secondary)"
            plain
            :color="tagColorMap?.[tag] || 'var(--text-regular)'"
          />
        </view>
      </template>
      <template v-if="props.type == 'private'">
        <!-- 插槽：用于私有卡片的自定义内容 -->
        <!-- <CardItem :data="cardData" type="private">
          <template #private-actions>
            内容
          </template>
        </CardItem> -->
        <view class="card-actions">
          <slot name="private-actions">
            <!-- 默认内容：编辑和删除按钮 -->
            <view class="action-buttons">
              <view
                class="custom-button"
                style="
                  background-color: var(--custom-button-primary);
                  color: var(--custom-button-text);
                "
                @click.stop.prevent="emit('publish', props.data)"
              >
                公开发布
              </view>
              <view
                class="custom-button"
                style="
                  background-color: var(--custom-button-edit);
                  color: var(--custom-button-text);
                "
                @click.stop.prevent="emit('edit', props.data)"
              >
                编辑
              </view>
              <view
                class="custom-button"
                style="
                  background-color: var(--custom-button-error);
                  color: var(--custom-button-text);
                "
                @click.stop.prevent="onDeleteClick(props.data)"
              >
                删除
              </view>
            </view>
          </slot>
        </view>
      </template>
      <template v-if="props.type == 'chat'">
        <!-- 插槽：用于私有卡片的自定义内容 -->
        <!-- <CardItem :data="cardData" type="private">
          <template #private-actions>
            内容
          </template>
        </CardItem> -->
        <view class="card-actions">
          <slot name="private-actions">
            <!-- 默认内容：编辑和删除按钮 -->
            <view class="action-buttons">
              <view
                class="custom-button"
                style="
                  background-color: var(--custom-button-error);
                  color: var(--custom-button-text);
                "
                @click.stop.prevent="onDeleteClick(props.data)"
              >
                删除
              </view>
            </view>
          </slot>
        </view>
      </template>
    </view>
  </view>
  <uv-modal
    :key="pendingDeleteData?.role_id"
    ref="modalRef"
    :closeOnClickOverlay="false"
    class="delete-modal"
  >
    <view class="delete-modal-content">确认要删除吗？</view>
    <template #confirmButton>
      <view class="delete-modal-buttons">
        <view
          class="delete-modal-custom-button delete-modal-custom-button-cancel"
          @click.stop.prevent="modalRef.close"
        >
          取消
        </view>
        <view
          class="delete-modal-custom-button delete-modal-custom-button-confirm"
          @click.stop.prevent="confirmDelete"
        >
          确认
        </view>
      </view>
    </template>
  </uv-modal>
</template>

<script setup>
import { ref, watch } from "vue";

import { tagColorMap } from "./data";
import defaultAvatar from "@/static/images/default-avatar.png";
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  type: {
    type: String,
    default: "look", // look 查看模式，用于 卡片列表，private  私有卡模式，用于创建的私有卡,chat 聊天列表的每一项
  },
});
const modalRef = ref();
const pendingDeleteData = ref(null);
const emit = defineEmits(["click", "edit", "delete", "publish"]);

const imageSrc = ref(props.data?.role_pic || defaultAvatar);

watch(
  () => props.data.role_pic,
  (newVal) => {
    imageSrc.value = newVal || defaultAvatar;
  }
);

const onDeleteClick = async (data) => {
  pendingDeleteData.value = data;
  await nextTick();
  modalRef.value.open();
};

const confirmDelete = () => {
  emit("delete", pendingDeleteData.value);
  modalRef.value.close();
  pendingDeleteData.value = null;
};
const handleImageError = () => {
  imageSrc.value = defaultAvatar;
};

const handleClick = (e) => {
  console.log("点击卡片：", e);
  e.stopPropagation();
  e.preventDefault();

  emit("click", props.data);
};
</script>

<style scoped lang="scss">
.card-item {
  display: flex;
  flex-direction: row;
  border-radius: 20rpx;
  overflow: hidden;
  border: 1rpx solid #ffffff; /* 白色边框 */
  box-shadow: 0 4rpx 12rpx rgba(255, 255, 255, 0.06); /* 白色轻微阴影 */
  margin: 14rpx 12rpx;
  width: 100%;
  height: 340rpx;
  padding: 12rpx;
}

.card-image-wrapper {
  width: 30%;
  height: 100%;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-content {
  width: 65%;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: var(--text-primary);
}

.card-author {
  font-size: 22rpx;
  color: #999;
}

.card-desc {
  font-size: 24rpx;
  color: var(--text-regular);
  line-height: 32rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: 6rpx;
}

.card-actions {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.action-buttons {
  display: flex;
  gap: 10rpx;
}
.custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx 16rpx;
  font-size: 22rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 6rpx rgba(255, 255, 255, 0.06);
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.delete-modal {
  /* 背景遮罩 */
  --uv-modal-overlay-background: rgba(0, 0, 0, 0.6);
  .delete-modal-content {
    font-size: 28rpx;
    height: 80rpx;
    color: var(--text-primary);
  }
  .delete-modal-buttons {
    display: flex;
    gap: 30rpx;
    justify-content: right;
    height: 36px;
    padding: 16rpx 24rpx;

    .delete-modal-custom-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8rpx 16rpx;
      font-size: 22rpx;
      border-radius: 8rpx;
      color: #ffffff;
      cursor: pointer;
      transition: opacity 0.2s ease;
    }
    .delete-modal-custom-button-cancel {
      background-color: var(--modal-btn-cancel-bg);
      color: var(--modal-btn-cancel-text);
      border-radius: 8rpx;
      width: 120rpx;
      border: none;
    }
    .delete-modal-custom-button-confirm {
      background-color: var(--modal-btn-primary-bg);

      color: var(--modal-btn-primary-text);
      border-radius: 8rpx;
      width: 120rpx;
      border: none;
    }
  }
}

:deep(.uv-modal) {
  background-color: var(--primary-bg-color);
}
:deep(.uv-popup__content) {
  background-color: transparent !important;
}
</style>
